<template>
  <div class="container">
    <el-dialog title="题目审核" :visible.sync="dialogVisible" width="40%" :before-close="handleClose">
      <el-form :model="formData" ref="ruleForm">
        <el-form-item>
          <el-radio-group v-model="formData.chkState">
            <el-radio :label="1">通过</el-radio>
            <el-radio :label="2">拒绝</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item prop="chkRemarks">
          <el-input type="textarea" placeholder="请输入审核意见" v-model.trim="formData.chkRemarks"></el-input>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="$emit('update:visible', false)">取 消</el-button>
        <el-button type="primary" @click="submitForm">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import { choiceCheck } from '@/api/hmmm/questions.js'
export default {
  name: 'QuestionsCheck',
  props: {
    id: {
      required: true,
      type: [Number, String]
    },
    visible: {
      required: true,
      default: false,
      type: Boolean
    }
  },
  data () {
    return {
      dialogVisible: false,
      formData: {
        id: '',
        chkState: 1,
        chkRemarks: ''
      }
    }
  },
  methods: {
    // 关闭回调
    handleClose (done) {
      this.chkState = 1
      this.chkRemarks = ''
      this.$emit('update:visible', false)
      done()
    },
    // 发送审核
    async submitForm () {
      if (this.formData.chkRemarks.length === 0) {
        return this.$message.warning('请输入审核意见')
      }
      const res = await choiceCheck(this.formData)
      if (!res.data.success) return this.$message.error('审核未通过或网络有误')
      this.$message.success('审核完成')
      // 触发父组件函数，刷新页面，重新获取数据
      this.$emit('chkUpdate')
      this.dialogVisible = false
      // 关闭后发送信息给父组件，同步更新父组件visible
      this.$emit('update:visible', false)
    }
  },
  watch: {
    visible (val) {
      this.dialogVisible = val
    },
    id (val) {
      this.formData.id = val
    }
  }
}
</script>

<style scoped lang='less'></style>
